<template>
  <div>
    <el-dialog
        class="app_detail"
        title="应用详情"
        :visible.sync="dialogVisible"
        width="70%"
        append-to-body
        :close-on-click-modal="false"
        >
        <div class="detail_app">
          <div class="img">
            <img :src="appData.square_logo_url" />
          </div>
          <div class="app_item">
            <div class="app_name">{{appData.name}}</div>
            <div class="app_description">{{appData.description}}</div>
          </div>
        </div>
        <div class="detail">
          <div class="detailId">AgentId</div>
          <div class="detailNum">{{appData.agentid}}</div>
        </div>
        <div class="detail_function">
          <div class="app_cardInner">
            <div class="function_title">功能</div>
            <div class="function_card">
              <div class="card_title">
                <i class="fa fa-credit-card"></i>
                <span>自定义菜单</span>
              </div>
              <div class="card_system">
                <div class="card_top"></div>
                <div class="card_name">进入系统</div>
              </div>
              <div class="card_btn" @click="handleClick">
                <span class="btn_name">已启用</span>
                <i class="fa fa-angle-right"></i>
              </div>
            </div>
          </div>
        </div>
    </el-dialog>
    <el-dialog
      class="menu_dialog"
      :title="appData.name+'-自定义菜单'"
      width="50%"
      :visible.sync="menuDialog"
      :before-close="menuDialogClose"
      append-to-body>
      <div class="menu" v-if="!isAddMenu">
        <div class="menu_card" v-for="(item,index) in menuList" :key="index">
          <div class="menu_title">
            <span>菜单{{index+1}}</span>
            <i class="el-icon-edit-outline" @click="handleEditClick(item,index)"></i>
          </div>
          <div class="menu_name">{{item.name}}</div>
        </div>
        <div class="menu_add" @click="handleAddMenu" v-if="menuList && menuList.length<3">添加主菜单</div>
      </div>
      <div v-else>
        <div class="btn_item">
          <el-button size="mini" @click="doBack">返回</el-button>
          <el-button type="success" size="mini" @click="doSave">保存</el-button>
        </div>
        <div class="addMenu">
          <div class="main_menu">
            <div class="main_name">
              <span>主菜单</span>
              <i class="el-icon-delete" @click="delectMenu"></i>
            </div>
            <el-input size="medium" v-model="mainName"></el-input>
          </div>
          <div class="content" v-for="(item,index) in subMenuList" :key="index">
            <div class="submenu" v-if="isShowSubMenu">
              <div class="main_name">
                <span>子菜单</span>
                <i class="el-icon-delete" @click="doRemove(index)"></i>
              </div>
              <el-input size="medium" v-model="item.subName"></el-input>
            </div>
            <div class="menu_item">
              <div class="item_name">表单内容:</div>
              <div>
                <el-select v-model="item.jumpTo" disabled placeholder="请选择" size="medium">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="menu_item">
              <div class="item_name">网址:</div>
              <div class="item_website">
                <el-input size="medium" v-model="item.website"></el-input>
              </div>
            </div>
          </div>
          <el-link type="primary" @click="handleAddSubMenu">添加子菜单</el-link>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name:'app_management_detail',
  data () {
    return {
      appData: {},
      menuDialog: false,
      menuList: [],
      isAddMenu: false,
      isShowSubMenu: false,
      editKey: "",
      options: [{
        value: '0',
        label: '跳转到网页'
      }, {
        value: '1',
        label: '发送消息'
      }, {
        value: '2',
        label: '跳转到小程序'
      }],
      mainName: "",
      subMenuList: [{
        subName: "",
        jumpTo: "0",
        website: ""
      }]
    }
  },
  props: [
    "visible",
    "itemData"
  ],
  computed:{
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },
  created(){
    this.getAppDetail();
  },
  methods: {
    getAppDetail(){
      let that = this;
      let agentsId = this.itemData.agentid;
      this.$api.wechatAgentsDetail(this.$route.query.domainid,agentsId,{
        onSucess: function(res){
          let data = res.data;
          if(data.errcode == 0){
            that.appData = data.data;
          }
        }
      })
    },
    handleClick(){
      let that = this;
      let agentsId = this.itemData.agentid;
      this.$api.getWechatMenus(this.$route.query.domainid,agentsId,{
        onSucess: function(res){
          let data = res.data;
          if(data.errcode == 0 && data.data){
            that.menuList = data.data;
          }
        }
      })
      this.menuDialog = true;
    },
    handleAddMenu(){
      this.isAddMenu = !this.isAddMenu;
    },
    handleAddSubMenu(){
      if(this.isShowSubMenu){
        this.subMenuList.push({
          subName: "",
          jumpTo: "0",
          website: ""
        });
      }
      this.isShowSubMenu = true;
    },
    menuDialogClose(done){
      done();
      this.setDefault();
    },
    setDefault(){
      this.isAddMenu = false;
      this.editKey = "";
      this.mainName = "";
      this.isShowSubMenu = false;
      this.subMenuList = [{
        subName: "",
        jumpTo: "0",
        website: ""
      }]
    },
    doBack(){
      this.setDefault();
    },
    doRemove(index){
      if(this.subMenuList.length == 1 && this.isShowSubMenu == true){
        this.isShowSubMenu = false;
      }else{
        this.subMenuList.splice(index,1);
      }
    },
    doSave(){
      let agentsId = this.itemData.agentid;
      let data = {};
      let sub_button = [];
      let that = this;
      if(this.isShowSubMenu){
        let isShowError = false;
        for(let i=0;i<this.subMenuList.length;i++){
          if(!this.subMenuList[i].subName){
            isShowError = true;
            this.formVerification("请填写子菜单名称");
            break;
          }else if(!this.subMenuList[i].website){
            isShowError = true;
            this.formVerification("请填写网址");
            break;
          }
          let obj = {
            type: "view",
            name: this.subMenuList[i].subName,
            url: this.subMenuList[i].website
          }
          sub_button.push(obj)
        }
        if(isShowError){
          return;
        }
        let button = [];
        if(this.editKey){
          for(let i=0;i<this.menuList.length;i++){
            if(i == this.editKey){
              let obj = {
                name: this.mainName,
                sub_button
              }
              button.push(obj);
            }else{
              button.push(this.menuList[i]);
            }
          }
        }else{
          button = button.concat(this.menuList);
          let obj = {
            name: this.mainName,
            sub_button
          }
          button.push(obj);
        }
        data = {
          button
        }

      }else{
        if(!this.mainName){
          this.formVerification("请填写主菜单名称");
          return false;
        }else if(!this.subMenuList[0].website){
          this.formVerification("请填写网址");
          return false;
        }
        let button = [];
        if(this.editKey){
          for(let i=0;i<this.menuList.length;i++){
            if(this.menuList[i].key == this.editKey){
              let obj = {
                type: "view",
                name: this.mainName,
                url:  this.subMenuList[0].website,
              }
              button.push(obj);
            }else{
              button.push(this.menuList[i]);
            }
          }
        }else{
          button = button.concat(this.menuList);
          let obj = {
            type: "view",
            name: this.mainName,
            url:  this.subMenuList[0].website,
          }
          button.push(obj);
        }
        data = {
          button
        }
      }
      console.log("data----->",data);
      this.$api.creatWechatMenus(this.$route.query.domainid,agentsId,data,{
        onSucess: function(res) {
          let data = res.data;
          if(data.errcode == 0){
            that.$message({
              message: '保存成功',
              type: 'success'
            });
            that.doBack();
            that.handleClick();
          }
        }
      })
    },
    formVerification(mes){
      this.$message.error(mes);
    },
    handleEditClick(item,index){
      this.mainName = item.name;
      this.editKey = item.key ? item.key : index;
      if(item.sub_button.length == 0){
        this.subMenuList[0].website = item.url;
      }else{
        let subMenuList = [];
        for(let i=0;i<item.sub_button.length;i++){
          let obj = {
            subName: item.sub_button[i].name,
            jumpTo: "0",
            website: item.sub_button[i].url

          }
          subMenuList.push(obj);
        }
        this.isShowSubMenu = true;
        this.subMenuList = subMenuList
      }
      this.isAddMenu = !this.isAddMenu;
    },
    delectMenu(){
      this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        for(let i=0;i<this.menuList.length;i++){
          if(this.menuList[i].key == this.editKey || this.menuList[this.editKey]){
            this.menuList.splice(i,1);
            break;
          }
        }
        let agentsId = this.itemData.agentid;
        let that = this;
        let data = {
          button: this.menuList
        }
        this.$api.creatWechatMenus(this.$route.query.domainid,agentsId,data,{
          onSucess: function(res) {
            let data = res.data;
            if(data.errcode == 0){
              that.$message({
                message: '保存成功',
                type: 'success'
              });
              that.doBack();
              that.handleClick();
            }
          }
        })
      }).catch(() => {});
    }
  },
}
</script>

<style lang='scss' scoped>
</style>
